<div class="auth-module">
  <div class="login-header flex flex-row flex-items-center flex-justify-end"  style="display: none;">

    <div class="time-box text-ellipsis">{{systemService.time}}</div>

    <div class="lang-box"
      style="margin-right:0.3rem">
      <nz-dropdown [nzPlacement]="'bottomLeft'">
        <button nz-button
          nz-dropdown
          class="lang-label capital-letters">{{systemService.langLabel}}</button>
        <ul nz-menu>
          <li nz-menu-item
            *ngFor="let lang of systemService.langs"
            (click)="systemService.changeLang(lang.value)" class="capital-letters">{{lang.label}}</li>
        </ul>
      </nz-dropdown>
    </div>
    <div class="other-box" style="margin-left: 20px;margin-right:20px;">
			<img src="/content/images/logo.png" alt="logo">
		</div>
  </div>

  <div class="login-main flex flex-justify-center flex-items-center">
    <div class="login-content ">
      <!-- <div class="login-right-part flex flex-column">
        <div class="login-logo">
          <img src="" alt="LOGO" class="logoImg">
        </div>
        <div class="login-project-name">
          <p>Vietnam</p>
          <p>ITMP</p>
        </div>
      </div> -->

      <div class="left-box">
          <h1 class="title1">Vietnam</h1>
        
            <h2 class="title2">ITMP</h2>
           
        
      </div>
      <!-- zenglu 123456 -->

      <div class="login-left-part">
        <div class="login-title login-font-family capital-letters">{{'auth.login.ok' | translate}}</div>
          <form nz-form [formGroup]="loginForm" class="login-form" (ngSubmit)="login()">
            <nz-form-item class="account">
              <nz-form-control>
                <nz-input-group [nzPrefix]="prefixUser">
                  <input type="text" nz-input formControlName="username" placeholder="{{'auth.login.userName' | translate}}">
                </nz-input-group>
                <nz-form-explain *ngIf="loginForm.get('username')?.dirty && loginForm.get('username')?.errors">
                  {{'auth.login.inputUserName' | translate}}
                </nz-form-explain>
              </nz-form-control>
            </nz-form-item>

            <nz-form-item class="password">
              <nz-form-control>
                <nz-input-group [nzPrefix]="prefixLock">
                  <input type="password" nz-input formControlName="password" placeholder="{{'auth.login.password' | translate}}">
                </nz-input-group>
                <nz-form-explain *ngIf="loginForm.get('password')?.dirty && loginForm.get('password')?.errors">
                  {{'auth.login.inputUserName' | translate}}
                </nz-form-explain>
              </nz-form-control>
            </nz-form-item>

            <nz-form-item>
              <!-- <nz-form-control>
                <div class="flex flex-justify-between" style="width:367px;">
                  <label nz-checkbox formControlName="remember">
                    <span class="login-font-family login-remember-line">{{'auth.login.rememberMe' | translate}}</span>
                  </label>
                  <span class="login-font-family login-remember-line">{{'auth.login.forgotPassword' | translate}}</span>
                </div>
              </nz-form-control> -->
            </nz-form-item>
            <nz-form-item>
              <div class="checkbox-line">
                <!-- <input  type="checkbox" /><span>{{'auth.login.rememberpassword' | translate}}</span> -->
              </div>
          </nz-form-item>
            <nz-form-item>
                <button nz-button class="login-form-button capital-letters" nzType="primary" [zcRepeatClick]="clickLoding">{{'auth.login.ok' | translate}}</button>
            </nz-form-item>
            
          </form>
          <ng-template #prefixUser><i class="iconfont icon-user"></i></ng-template>
          <ng-template #prefixLock><i class="iconfont icon-lock"></i></ng-template>
      </div>
    </div>
  </div>

  <!-- <div class="login-footer">
    <div class="login-attribution">
		&copy;ST Engineering Electronic
	</div>
  </div> -->

</div>
